import React from 'react';
import Api from 'Utils/api';
import { Table, Modal, message, Spin } from 'antd';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import { formatUtcTime } from 'Utils/index';
import EditModal from './EditModal';
import CommonBorder from './../../../DispatchPage/Components/CommonBorder';
import './index.scss';

const PAGE_SIZE = 8;
const confirm = Modal.confirm;
class DialogueReception extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectTab: 1,
      totalCount: 0,
      list: [],
      listPage: 1,
      isLoading: true,
    };
    this.condition = { offset: 0, limit: PAGE_SIZE };
    this.onEdit = ::this.onEdit;
    this.onDetail = ::this.onDetail;
    this.onDelete = ::this.onDelete;
    this.init = ::this.init;
    this.showState = ::this.showState;
  }
  componentDidMount() {
    this.init();
  }
  showState(state) {
    if (state === 0) {
      return {
        color: '#F45757',
        label: '未处理'
      };
    }
    if (state === 1) {
      return {
        color: '#ffffff',
        label: '处理中'
      };
    }
    return {
      color: '#00FFBF',
      label: '已处理'
    };
  }
  init() {
    const api = new Api({
      method: 'GET',
      path: '/randoms/admin',
      query: { ...this.condition },
      success: (json) => {
        this.setState({
          isLoading: false,
          list: json.data_list,
          listPage: ((this.condition.offset / PAGE_SIZE) + 1),
          totalCount: json.total_count,
        });
      },
      error: (msg) => {
        this.setState({
          isLoading: false
        });
        message.error(msg);
      }
    });
    api.run();
  }
  onListPageChange(page) {
    this.setState({ listPage: page, isLoading: true }, this.init.bind(this));
    this.condition.offset = (page - 1) * PAGE_SIZE;
  }
  onDetail(id) {
    this.props.dispatch(routerActions.push(`/system/corule/interactive/dialogue/detail/${id}`));
  }
  onEdit(record) {
    this.form.showModal(record);
  }
  onDelete(id) {
    const self = this;
    confirm({
      title: '删除你点我检管理',
      content: '确定删除该条你点我检管理吗？',
      onOk() {
        self.setState({
          isLoading: true,
        });
        const api = new Api({
          method: 'DELETE',
          path: `/randoms/admin/${id}`,
          success: () => {
            message.success('删除成功');
            self.init();
          },
          error: (err) => {
            this.setState({ isLoading: false });
            message.error(err);
          }
        });
        api.run();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  generatorColumns() {
    return [
      {
        title: '检查对象',
        dataIndex: 'company_name',
        render: text => (
          <span className="td-item" >{text}</span >
        )
      },
      {
        title: '类别',
        dataIndex: 'type',
        render: text => (
          <span className="td-item">{text}</span>
        )
      },
      {
        title: '执法人员',
        dataIndex: 'law_executor1',
        render: (text, record) => (
          <span className="td-item">{text}{`、${record.law_executor2}`}</span>
        )
      },
      {
        title: '检查内容',
        dataIndex: 'content',
        render: text => (
          <span className="td-item" >{text}</span>
        )
      },
      {
        title: '预约时间',
        dataIndex: 'create_time',
        render: text => (
          <span className="td-item">{formatUtcTime(text)}</span>
        )
      },
      {
        title: '状态',
        dataIndex: 'state',
        render: (text) => {
          const item = this.showState(text);
          return <span className="td-item" style={{ color: item.color }}>{item.label}</span>;
        }
      },
      {
        title: '操作',
        dataIndex: 'power',
        render: (text, record) => (
          <div className="operation td-item">
            <span className="edit" style={{ color: '#00D9FF' }}onClick={this.onDetail.bind(this, record.id)}>查看</span >
            <span className="operation-update" onClick={this.onEdit.bind(this, record)}>修改</span >
            <span className="operation-delete" onClick={this.onDelete.bind(this, record.id)}>删除</span >
          </div>
        )
      }
    ];
  }
  render() {
    const { list } = this.state;
    const columns = this.generatorColumns();
    return (
      <div className="double-page-wrap">
        <CommonBorder
          content={
            <Spin size="large" spinning={this.state.isLoading} tip="加载中...">
              <Table
                className="interactive-content"
                rowKey={record => record.id}
                columns={columns}
                bordered
                dataSource={list}
                pagination={{
                  pageSize: PAGE_SIZE,
                  total: this.state.totalCount,
                  current: this.state.listPage,
                  onChange: this.onListPageChange.bind(this)
                }}
              />
            </Spin>
          }
        />
        <EditModal
          ref={(ref) => { this.form = ref; }}
          onEdit={this.init}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}

export default connect(mapStateToProps)(DialogueReception);
